<template>
  <div class="container">
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-input
          v-model="searchParams.name"
          placeholder="请输入客户姓名"
          clearable
          @clear="handleSearch"
          @keyup.enter="handleSearch"
      ></el-input>
      <el-input
          v-model="searchParams.contact_info"
          placeholder="请输入联系方式"
          clearable
          @clear="handleSearch"
          @keyup.enter="handleSearch"
      ></el-input>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button type="success" @click="handleAdd">新增客户</el-button>
      <el-button
          v-loading="addLoading"
          type="info"
          plain size="small"
          icon="el-icon-upload2"
          @click="exportEvent"
      >导出</el-button>
    </div>

    <!-- 客户信息列表区域 -->
    <div class="list-area">
      <el-table :data="customerList" border style="width: 100%">
        <!-- 客户姓名 -->
        <el-table-column prop="name" label="客户姓名" width="180"></el-table-column>
        <!-- 联系方式 -->
        <el-table-column prop="contact_info" label="联系方式" width="180"></el-table-column>
        <!-- 购车意向 -->
        <el-table-column prop="purchase_intent" label="购车意向"></el-table-column>
        <!-- 客户分类 -->
        <el-table-column prop="type" label="客户分类" width="120"></el-table-column>
        <el-table-column  label="编辑" width="150">
          <template slot-scope="{ row }">
            <el-button type="text" @click="handleEdit(row)">编辑</el-button>
            <el-button type="text" @click="handleView(row)">查看</el-button>
            <el-button type="text" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑区域 -->
    <div v-if="showDialog" class="dialog-area">
      <el-dialog :visible.sync="showDialog" :title="dialogTitle">
        <el-form :model="currentCustomer">
          <el-form-item label="客户姓名">
            <el-input v-model="currentCustomer.name" :disabled="isView"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="currentCustomer.contact_info"></el-input>
          </el-form-item>
          <el-form-item label="购车意向">
            <el-input v-model="currentCustomer.purchase_intent"></el-input>
          </el-form-item>
          <el-form-item label="客户分类">
            <el-input v-model="currentCustomer.type"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSave">保存</el-button>
            <el-button @click="handleCancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getCustomerList, addCustomer, updateCustomer, deleteCustomer,exportCustomer } from "@/api/customer";
import {exportTest} from "@/api/tests";
export default {
  data() {
    return {
      searchParams: {
        name: "", // 客户姓名
        contact_info: "", // 联系方式
      },
      customerList: [], // 客户列表
      showDialog: false, // 控制对话框显示
      currentCustomer: null, // 当前编辑的客户信息
      dialogTitle: '', // 弹窗标题
      isView: false, // 是否为查看模式
      addLoading:false,
    };
  },
  created() {
    // 页面加载时，初始化客户列表
    this.fetchCustomerList();
  },
  methods: {
    // 客户信息导出事件
    async exportEvent(){
      try {
        this.addLoading=true;
        let res=await exportCustomer(this.searchParams);
        console.log(res)
        this.addLoading=false;
        this.$downFile(res);
      }catch (e) {
        this.addLoading=false;
      }
    },
    // 获取客户列表
    async fetchCustomerList() {
      try {
        const response = await getCustomerList(this.searchParams);
        if (response.code === 1) {
          this.customerList = response.data;
        } else {
          this.$message.error(response.message || '获取客户列表失败');
        }
      } catch (error) {
        console.error("获取客户列表失败:", error);
        this.$message.error("获取客户列表失败，请稍后重试");
      }
    },
    // 处理搜索操作
    handleSearch() {
      this.fetchCustomerList(); // 重新获取客户列表
    },
    // 处理编辑操作
    handleEdit(row) {
      this.dialogTitle = '编辑客户信息';
      this.currentCustomer = Object.assign({}, row); // 复制当前行数据，避免直接修改
      this.showDialog = true;
    },
    // 处理查看操作
    handleView(row) {
      this.dialogTitle = '查看客户信息';
      this.currentCustomer = Object.assign({}, row);
      this.showDialog = true;
      this.isView = true; // 标记为查看模式
    },
    // 处理删除操作
    async handleDelete(row) {
      try {
        await this.$confirm('此操作将永久删除该客户信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        let data = {
          id:row.id
        }
        const response = await deleteCustomer(data);
        if (response.code === 1) {
          this.$message.success('删除成功');
          await this.fetchCustomerList(); // 重新加载列表
        } else {
          this.$message.error(response.message || '删除失败');
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error("删除客户失败:", error);
          this.$message.error("删除失败，请稍后重试");
        }
      }
    },
    // 保存编辑后的客户信息
    async handleSave() {
      try {
        const isEdit = !!this.currentCustomer.id;
        const response = isEdit
          ? await updateCustomer(this.currentCustomer)
          : await addCustomer(this.currentCustomer);

        if (response.code === 1) {
          this.$message.success(isEdit ? '更新成功' : '添加成功');
          this.showDialog = false;
          await this.fetchCustomerList(); // 重新加载列表
        } else {
          this.$message.error(response.message || (isEdit ? '更新失败' : '添加失败'));
        }
      } catch (error) {
        console.error("保存客户信息失败:", error);
        this.$message.error("保存失败，请稍后重试");
      }
    },
    // 取消编辑
    handleCancel() {
      this.showDialog = false;
      this.currentCustomer = null;
      this.isView = false;
    },
    // 添加新客户
    handleAdd() {
      this.dialogTitle = '添加客户';
      this.currentCustomer = {
        name: '',
        contact_info: '',
        purchase_intent: '',
        type: ''
      };
      this.showDialog = true;
      this.isView = false;
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
  background-color: #f9f9f9; // 背景色
  border-radius: 8px; // 圆角
}
.search-area {
  margin-bottom: 20px;

  .el-input {
    width: 200px;
    margin-right: 10px;
  }
}

.list-area {
  margin-top: 20px;
}

.dialog-area {
  margin-top: 20px;
}

.dialog-area .el-dialog {
  width: 400px;
}
</style>
